<template>
  <public-modal
    width="700px"
    :footer="false"
    title="标称值编辑"
    modalStyle="visitor-detailModal"
    :publicVisible="publicVisible"
    @handleOk="handleOk"
    @cancel="cancel"
  >
    <div slot="content">
      <a-form-model
        :model="form"
        :rules="rules"
        ref="form"
        class="formStyle"
        autocomplete="off"
        layout="inline"
        :labelCol="{ style: 'width: 220px' }"
      >
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="油烟浓度预警值(mg/m³)" prop="lampblackEarly">
              <a-input
                :maxLength="6"
                autocomplete="off"
                @change="update"
                placeholder="请填写油烟浓度预警值"
                v-model.trim="form.lampblackEarly"
              />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="油烟浓度告警值(mg/m³)" prop="lampblackWarning">
              <a-input
                :maxLength="6"
                autocomplete="off"
                @change="update"
                placeholder="请填写油烟浓度告警值"
                v-model.trim="form.lampblackWarning"
              />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="颗粒物浓度预警值(mg/m³)" prop="particulateEarly">
              <a-input
                :maxLength="6"
                autocomplete="off"
                @change="update"
                placeholder="请填写颗粒物浓度预警值"
                v-model.trim="form.particulateEarly"
              />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="颗粒物浓度告警值(mg/m³)" prop="particulateWarning">
              <a-input
                :maxLength="6"
                autocomplete="off"
                @change="update"
                placeholder="请填写颗粒物浓度告警值"
                v-model.trim="form.particulateWarning"
              />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="非甲烷总烃浓度预警值(mg/m³)" prop="nonMethaneEarly">
              <a-input
                :maxLength="6"
                autocomplete="off"
                @change="update"
                placeholder="请填写非甲烷总烃浓度预警值"
                v-model.trim="form.nonMethaneEarly"
              />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="非甲烷总烃浓度告警值(mg/m³)" prop="nonMethaneWarning">
              <a-input
                :maxLength="6"
                autocomplete="off"
                @change="update"
                placeholder="请填写非甲烷总烃浓度告警值"
                v-model.trim="form.nonMethaneWarning"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
  </public-modal>
</template>
<script>
import { editNominalValue } from '@/api/device'
import { getAction } from '@/api/manage'
import publicModal from '@/components/publicModal'
export default {
  name: 'cancelModel',
  components: { publicModal },
  data() {
    return {
      form: {},
      records: {},
      rules: {
        lampblackEarly: [{ required: true, message: '请填写油烟浓度预警值' }],
        lampblackWarning: [{ required: true, message: '请填写油烟浓度告警值' }],
        particulateEarly: [{ required: true, message: '请填写颗粒物浓度预警值' }],
        particulateWarning: [{ required: true, message: '请填写颗粒物浓度告警值' }],
        nonMethaneEarly: [{ required: true, message: '请填写非甲烷总烃浓度预警值' }],
        nonMethaneWarning: [{ required: true, message: '请填写非甲烷总烃浓度告警值' }],
      },
      restaurantTypeList: [],
      publicVisible: false,
    }
  },
  mounted() {},
  methods: {
    async show(records) {
      // this.records = records
      this.form.deviceId = records
      await this.getValue()
      this.publicVisible = true
    },

    async getValue() {
      let { result } = await getAction('/device/config/detail', { deviceId: this.form.deviceId })
      if (result !== null) {
        this.form.lampblackEarly = result.lampblackEarly
        this.form.lampblackWarning = result.lampblackWarning
        this.form.particulateEarly = result.particulateEarly
        this.form.particulateWarning = result.particulateWarning
        this.form.nonMethaneEarly = result.nonMethaneEarly
        this.form.nonMethaneWarning = result.nonMethaneWarning
      }
    },
    handleOk() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return
        let data = { ...this.form }
        let res = await editNominalValue(data)
        this.form = {}
        this.$message.success(res.message)
        this.publicVisible = false
        this.$emit('refresh')
      })
    },
    update() {
      this.$forceUpdate()
    },
    cancel() {
      this.publicVisible = false
      this.form = {}
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .modalCotent {
  padding: 35px 42px;
}
.visitor-detailModal {
  .formStyle {
    padding: 0;
  }
}
</style>
